<template>
  <a-modal :visible="visible" title="发票详情" :width="1000" @ok="onOk" :footer="null" @cancel="onCancel" ok-text="保存并新增" cancel-text="取消">
    <div style="text-align:center;font-size:20px;font-weight:bold;margin-bottom:16px;">无票销售收入（未开具发票）</div>
    <a-form :model="form" layout="Horizontal">
      <a-row>
        <a-col :span="12">
          <a-form-item label="业务日期">
            <a-date-picker v-model:value="form.businessDate" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">

        <a-col :span="12">
          <a-form-item label="购货方名称">
            <a-input v-model:value="form.buyerName" placeholder="请输入购货方名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="购方纳税人识别号">
            <a-input v-model:value="form.buyerTaxId" placeholder="请输入纳税人识别号" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="备注">
            <a-input v-model:value="form.remark" placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-table :dataSource="form.tableData" :columns="columns" bordered pagination="false" style="margin-bottom:12px;">
        <template #bodyCell="{ column, record, rowIndex }">
          <template v-if="column.dataIndex === 'action'">
            <!-- 可扩展操作列 -->
          </template>
        </template>
        <template #summary>
          <a-table-summary-row>
            <a-table-summary-cell :colSpan="columns.length-1">价税合计</a-table-summary-cell>
            <a-table-summary-cell>{{ totalAmount }}</a-table-summary-cell>
          </a-table-summary-row>
        </template>
      </a-table>
      <div style="text-align:center;margin-top:16px;">
        <a-button type="primary" style="margin-right:8px;">保存并新增</a-button>
        <a-button type="primary" style="margin-right:8px;">保存</a-button>
        <a-button @click="onCancel">取消</a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

defineExpose({ showModal });

const visible = ref(false);
const form = reactive({
  businessDate: '',
  buyerName: '',
  buyerTaxId: '',
  remark: '',
  tableData: [
    // 示例空行，可根据需要动态添加
    {}, {}, {}, {}, {}
  ]
});

const columns = [
  { title: '经济、虚拟交易及服务类', dataIndex: 'businessType' },
  { title: '摄像编号', dataIndex: 'cameraNo' },
  { title: '计收方式', dataIndex: 'chargeType' },
  { title: 'OT征项目', dataIndex: 'otProject' },
  { title: '明细项目', dataIndex: 'detailProject' },
  { title: '单位', dataIndex: 'unit' },
  { title: '数量', dataIndex: 'quantity' },
  { title: '金额', dataIndex: 'amount' },
  { title: '税率', dataIndex: 'taxRate' },
  { title: '税额', dataIndex: 'taxAmount' },
  { title: '价税合计', dataIndex: 'totalAmount' },
];

const totalAmount = computed(() => {
  // 计算价税合计
  return form.tableData.reduce((sum, row) => sum + (Number(row.totalAmount) || 0), 0);
});

function showModal(record) {
  visible.value = true;
  // 可根据record初始化表单
}

function onCancel() {
  visible.value = false;
}

function onOk() {
  // 校验和提交逻辑
  visible.value = false;
}
</script>

<style scoped>
:deep(.ant-modal-body) {
  padding-top: 12px;
}
</style> 